<template>
  <section>
    <el-row class="page-container border padding" style="margin-left:-20px;margin-right:-20px;">
      <el-row>
        <el-col :span="6" style="margin-left: 20px;">
          <el-input style="width:99%;" v-model="needAddTagCategoryNameInputValue" placeholder="技能分类，回车直接添加"
            @keyup.enter.native="addTagCategorySubmitMethod"></el-input>
        </el-col>
        <el-col :span="14">
          <el-checkbox v-if="userInfo.isPlatformAdmin||userInfo.isSuperAdmin" v-model="isPub" true-label="1"
            false-label="0">公共分类</el-checkbox>
          <el-button @click="getAllHrSkill" v-loading="sectionLoading">查询</el-button>
          <el-button type="primary" v-if="jump==true" @click="selectConfirm">确认</el-button>
        </el-col>
        <!-- <el-col :span="4" class="hidden-sm-and-down">
          <el-tooltip content="黄色表示已经有的技能">
            <span class="addTagSquare"></span>
          </el-tooltip>
          <el-tooltip content="白色表示尚未拥有的技能">
            <span class="closeTagSquare"></span>
          </el-tooltip>
        </el-col> -->
      </el-row>
    </el-row>
		<el-row class="page-main padding-top">
      <el-row v-for="(item,index) in convertSkills" :key="item.categoryId">
        <h3>
          <div>
            {{item.categoryName+(item.pubc=='1'?'(公共)':'')}}
            <i class="el-icon-close closeStyle" style="margin-left: 10px;"
              @click.stop="delTagCategoryMethod(item.categoryId,index)"></i>:
          </div>
        </h3>
        <el-col :span="24" style="display:flex;flex-wrap: wrap;width: 100%;">
          <el-tag :key="tagName" v-for="(i,valueIndex) in item.values" closable :disable-transitions="false"
            :color="i.checked?'':'#ffffff'" :effect="i.checked?'dark':'light'"
            @click="clickTagMethod(index,valueIndex)">
            {{i.skillName +(i.pubSkill=='1'?'(公共)':'')}}
          </el-tag>

          <el-input class="input-new-tag" v-if="item.showAddButtonVisible" v-model="item.showAddButtonInputValue"
            ref="saveTagInput" size="small" @keyup.enter.native="addTagMethod(index)" @blur="addTagMethod(index)"
            autofocus>
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showAddButtonMethod(index)">+ 技能</el-button>


        </el-col>
      </el-row>
    </el-row>
  </section>
</template>

<script>
  import util from "@/common/js/util"; //全局公共库
  //import Sticky from "@/components/Sticky"; // 粘性header组件
  //import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
  import {
    getAllHrSkill,
    delHrSkillCategory,
    addHrSkill,
    delHrSkill,
  } from "@/api/oa/hr/skill/hrSkill";

  import {
    mapGetters
  } from "vuex";
  import {
    addHrSkillCategory
  } from "@/api/oa/hr/skill/hrSkillCategory";
  export default {
    computed: {
      ...mapGetters(["workShop", "userInfo"]),
    },

    props: ["jump", "visible", "skillIds"],
    watch: {
      'skillIds': {
        immediate: true,
        handler(skillIds, old) {
          console.log("skillIds:" + skillIds);
          if (skillIds && skillIds.length > 0) {
            console.log(":==============================");
            // console.log("this.convertSkills:"+JSON.stringify(this.convertSkills));
            this.convertSkills.forEach((i) => {
              if (i.values && i.values.length > 0) {
                i.values.forEach((k) => {
                  console.log("k.skillId:" + k.skillId);

                  if (skillIds.some((j) => j == k.skillId)) {
                    k.checked = true;
                  } else {
                    k.checked = false;
                  }
                });
              }
            });
          }
        }

      },
    },
    data() {
      return {
        sectionLoading: false,
        convertSkills: [],
        needAddTagCategoryNameInputValue: "",
        isPub: "0",
      };
    }, //end data
    methods: {
      getAllHrSkill() {
        let params = {};
        params.branchId = this.workShop.branchId;
        this.sectionLoading = true;
        getAllHrSkill(params)
          .then((res) => {
            this.sectionLoading = false;
            var tips = res.data.tips;
            if (tips.isOk) {
              let allSkill = res.data.data;
              let convert = [];
              for (let i = 0; i < allSkill.length; i++) {
                let flag = true; //判断是否需要添加
                let skill = allSkill[i];
                for (let j = 0; j < convert.length; j++) {
                  if (
                    skill.skillId &&
                    skill.categoryId == convert[j].categoryId
                  ) {
                    let json = {
                      isSaveInDatabase: true,
                      checked: skill.checked ? true : false,
                      skillId: skill.skillId,
                      skillName: skill.skillName,
                      pubTag: skill.pubSkill,
                    };
                    if (
                      this.skillIds &&
                      this.skillIds.some((id) => id == json.skillId)
                    ) {
                      json.checked = true;
                    }
                    convert[j].values.push(json);
                    flag = false;
                    break;
                  }
                }
                if (flag) {
                  let json = {
                    showAddButtonVisible: false, //添加技能按钮
                    showAddButtonInputValue: "", //添加技能按钮的输入框的值
                    categoryId: skill.categoryId,
                    categoryName: skill.categoryName,
                    pubc: skill.pubc,
                    values: [{
                      isSaveInDatabase: false,
                      checked: false,
                      skillId: skill.skillId,
                      skillName: skill.skillName,
                      pubTag: skill.pubSkill,
                    }, ],
                  };
                  if (!json.values[0].skillId) {
                    json.values = [];
                  } else {
                    if (
                      this.skillIds &&
                      this.skillIds.some((id) => id == json.values[0].skillId)
                    ) {
                      json.values[0].checked = true;
                    }
                  }
                  convert.push(json);
                }
              }
              console.log(convert);
              this.convertSkills = convert;
            } else {
              this.$message({
                message: tips.msg,
                type: "error",
              });
            }
            this.sectionLoading = false;
          })
          .catch((err) => (this.sectionLoading = false));
      },
      //添加技能分类的方法
      addTagCategorySubmitMethod() {
        let that = this;
        if (!(this.userInfo.isPlatformAdmin || this.userInfo.isSuperAdmin)) {
          if (this.isPub == "1") {
            this.$message({
              message: "你不是平台管理员不能添加公共技能分类",
              type: "error",
            });
            return;
          }
        }

        if (
          this.convertSkills.some(
            (i) => i.categoryName == this.needAddTagCategoryNameInputValue
          )
        ) {
          this.$message({
            message: "技能分类已经存在",
            type: "error",
          });
          return false;
        }
        if (!this.needAddTagCategoryNameInputValue) {
          return;
        }
        let params = {
          branchId: this.workShop.branchId,
          shopId: this.workShop.shopId,
          categoryName: this.needAddTagCategoryNameInputValue,
          isPub: this.isPub,
        };
        that.sectionLoading = true;
        addHrSkillCategory(params)
          .then((res) => {
            that.sectionLoading = false;
            var tips = res.data.tips;
            if (tips.isOk) {
              that.needAddTagCategoryNameInputValue = "";
              let json = {
                showAddButtonVisible: false, //添加技能按钮
                showAddButtonInputValue: "", //添加技能按钮的输入框的值
                categoryId: res.data.data.id,
                categoryName: res.data.data.categoryName,
                values: [],
                pubc: res.data.data.isPub,
              };
              this.convertSkills.push(json);
            }
            this.$message({
              message: tips.msg,
              type: tips.isOk ? "success" : "error",
            });
          })
          .catch((err) => (this.sectionLoading = false));
      },
      //删除技能分类的方法
      delTagCategoryMethod(categoryId, index) {
        let that = this;
        if (!categoryId) {
          return;
        }
        let params = {
          shopId: this.workShop.shopId,
          branchId: this.workShop.branchId,
          id: categoryId,
        };
        if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
          if (
            this.convertSkills.some(
              (i) => i.pubc == "1" && i.categoryId == categoryId
            )
          ) {
            this.$message({
              message: "公共分类不允许删除",
              type: "error",
            });
            return;
          }
        }
        this.$confirm(
            "此操作将永久删除该技能分类, 并连同该技能分类下面的技能也删除，是否继续?",
            "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
          .then(() => {
            that.sectionLoading = true;
            delHrSkillCategory(params)
              .then((res) => {
                that.sectionLoading = false;
                var tips = res.data.tips;
                if (tips.isOk) {
                  this.convertSkills.splice(index, 1);
                  /*this.getTags();*/
                }
                this.$message({
                  message: tips.msg,
                  type: tips.isOk ? "success" : "error",
                });
              })
              .catch((err) => (this.sectionLoading = false));
          })
          .catch(() => {});
      },
      //显示添加按钮的方法
      showAddButtonMethod(index) {
        this.convertSkills[index].showAddButtonVisible = true;
      },
      //添加技能的方法
      addTagMethod(index) {
        if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
          if (this.isPub == "1") {
            this.$message({
              message: "不是平台管理员，不允许增加公共技能",
              type: "error",
            });
            return;
          }
        }
        if (
          this.convertSkills.some((i) => {
            return i.values.some(
              (skill) =>
              skill.skillName ==
              this.convertSkills[index].showAddButtonInputValue
            );
          })
        ) {
          this.$message({
            message: "技能已经存在",
            type: "error",
          });
          return false;
        }
        if (!this.convertSkills[index].pubc) {
          if (this.isPub == "1") {
            this.$message({
              message: "该分类不是公共分类，不能添加公共技能",
              type: "error",
            });
            return false;
          }
        }
        let that = this;
        let skillName = this.convertSkills[index].showAddButtonInputValue;
        let categoryId = this.convertSkills[index].categoryId;
        let params = {
          branchId: that.workShop.branchId,
          shopId: that.workShop.shopId,
          categoryId: categoryId,
          skillName: skillName,
          isPub: this.isPub,
        };

        if (!params.skillName) {
          return;
        }
        console.log("params");
        console.log(params);
        this.sectionLoading = true;
        addHrSkill(params)
          .then((res) => {
            this.sectionLoading = false;
            var tips = res.data.tips;
            if (tips.isOk) {
              let json = {
                isSaveInDatabase: false,
                checked: false,
                skillId: res.data.data.id,
                skillName: res.data.data.skillName,
                pubTag: res.data.data.isPub,
              };
              this.convertSkills[index].showAddButtonInputValue = "";
              this.convertSkills[index].values.push(json);
            }
            this.$message({
              message: tips.msg,
              type: tips.isOk ? "success" : "error",
            });
          })
          .catch((err) => (this.sectionLoading = false));
      },
      //删除技能的方法
      delTagMethod(skillId, index, valueIndex) {
        if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
          if (
            this.convertSkills[index].values.some(
              (i) => i.pubSkill == "1" && i.skillId == skillId
            )
          ) {
            this.$message({
              message: "公共技能不允许删除",
              type: "error",
            });
            return;
          }
        }
        let that = this;

        let params = {
          id: skillId,
        };
        if (!params.id) {
          return;
        }

        this.$confirm("此操作将永久删除该技能, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            that.sectionLoading = true;
            delHrSkill(params)
              .then((res) => {
                that.sectionLoading = false;
                var tips = res.data.tips;
                if (tips.isOk) {
                  this.convertSkills[index].values.splice(valueIndex, 1);
                  /*this.getTags();*/
                }
                this.$message({
                  message: tips.msg,
                  type: tips.isOk ? "success" : "error",
                });
              })
              .catch((err) => (this.sectionLoading = false));
          })
          .catch(() => {});
      },
      clickTagMethod(index, valueIndex) {
        this.convertSkills[index].values[valueIndex].checked = !this
          .convertSkills[index].values[valueIndex].checked;
      },
      selectConfirm() {
        let selectSkills = [];
        this.sels = this.convertSkills.forEach((i) => {
          if (i.values && i.values.length > 0) {
            i.values.forEach((j) => {
              if (j.checked == true) {
                selectSkills.push(j);
              }
            });
          }
        });
        this.$emit("select-confirm", selectSkills);
      },
    }, //end methods
    components: {

      //在下面添加其它组件
    },
    mounted() {
      this.getAllHrSkill();
      // this.$nextTick(() => {
      // 	this.getAllHrSkill();
      // });
    },
  };
</script>

<style scoped>
  .copyButton {
    margin-left: 5px;
    border-radius: 20px;
    padding: 10px 1px;
    border: 1px solid rgb(220, 223, 230);
    /* color:#039; */
  }

  .copyButton:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    cursor: default;
  }

  .checkCopyButton {
    /*color: #fff;*/
    margin-left: 5px;
    border-radius: 20px;
    padding: 10px 1px;
    border: 1px solid #ffa00a;
    /*background-color: rgba(230, 162, 60, .1);*/
    /* background-color: #f9f9f9; */
    background-color: #fff;
    /*border-color: rgba(230,162,60,.2);*/
    color: #ffa00a;
  }

  .add {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 2px;
  }

  .add:hover {
    cursor: pointer;
    animation: myrotate 0.5s linear infinite;
  }

  .input-tag {
    margin-left: 10px;
    margin-top: 2px;
    align-self: center;
  }

  .closeStyle {
    padding: 1px;
  }

  .closeStyle:hover {
    cursor: pointer;
    /* border-color:#f40; */
    /* border: 1px solid #f40; */
    background-color: #ffa00a;
    color: #fff;
    border-radius: 50%;
    padding: 1px;
    animation: myrotate 1s linear;
  }

  .addTagSquare {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #ffa00a;
    animation: myrotate 2s linear infinite;
  }

  .closeTagSquare {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #fff;
    animation: myrotate 2s linear infinite;
  }

  @keyframes myrotate {
    0% {
      transform: rotate(0deg);
      box-shadow: 0px 0px 10px #fff;
    }

    50% {
      transform: rotate(180deg);
      box-shadow: 0px 0px 45px #fff;
    }

    100% {
      transform: rotate(360deg);
      box-shadow: 0px 0px 10px #fff;
    }
  }
  .el-tag+.el-tag {
    margin-right: 10px;
  }

  .button-new-tag {
    margin-right: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-right: 10px;
    /* vertical-align: bottom; */
  }

  .el-tag--medium {
    height: 32px;
    line-height: 32px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .app-container {
      padding: 20px 0;
  }
</style>
